<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约挂号</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="stylesheet" href="./appointment.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <button class="back-btn" onclick="window.location.href='/demo/index/index.html'">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1>预约挂号</h1>
        </div>

        <!-- 科室选择 -->
        <div class="department-section">
            <h3>选择科室</h3>
            <div class="department-grid" id="departmentGrid">
                <!-- 科室将由JavaScript动态加载 -->
                <div class="department-item" data-department="心内科">
                    <i class="fas fa-heart"></i>
                    <span>心内科</span>
                </div>
                <div class="department-item" data-department="神经内科">
                    <i class="fas fa-brain"></i>
                    <span>神经内科</span>
                </div>
                <div class="department-item" data-department="骨科">
                    <i class="fas fa-bone"></i>
                    <span>骨科</span>
                </div>
                <div class="department-item" data-department="口腔科">
                    <i class="fas fa-tooth"></i>
                    <span>口腔科</span>
                </div>
                <div class="department-item" data-department="眼科">
                    <i class="fas fa-eye"></i>
                    <span>眼科</span>
                </div>
                <div class="department-item" data-department="耳鼻喉科">
                    <i class="fas fa-deaf"></i>
                    <span>耳鼻喉科</span>
                </div>
                <div class="department-item" data-department="普通内科">
                    <i class="fas fa-user-md"></i>
                    <span>普通内科</span>
                </div>
                <div class="department-item" data-department="更多科室">
                    <i class="fas fa-plus"></i>
                    <span>更多科室</span>
                </div>
            </div>
        </div>

        <!-- 日期选择 -->
        <div class="date-section">
            <h3>选择日期</h3>
            <div class="date-scroll" id="dateScroll">
                <!-- 日期将由JavaScript动态生成 -->
            </div>
        </div>

        <!-- 时间段选择 -->
        <div class="time-section" id="timeSection">
            <h3>选择时间段</h3>
            <div class="time-grid" id="timeGrid">
                <div class="time-item" data-time="08:00">08:00</div>
                <div class="time-item" data-time="09:00">09:00</div>
                <div class="time-item" data-time="10:00">10:00</div>
                <div class="time-item" data-time="11:00">11:00</div>
                <div class="time-item" data-time="14:00">14:00</div>
                <div class="time-item" data-time="15:00">15:00</div>
                <div class="time-item" data-time="16:00">16:00</div>
                <div class="time-item" data-time="17:00">17:00</div>
            </div>
        </div>

        <!-- 医生列表 -->
        <div class="doctor-section">
            <h3>可预约医生</h3>
            <div class="doctor-list" id="doctorList">
                <!-- 医生列表将由JavaScript动态加载 -->
                <div class="loading-spinner" id="loadingSpinner">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span>加载中...</span>
                </div>
            </div>
        </div>

        <!-- 预约表单弹窗 -->
        <div class="appointment-modal" id="appointmentModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>预约信息</h3>
                    <button class="close-btn" id="closeModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="appointmentForm">
                        <div class="form-group">
                            <label>就诊医生</label>
                            <div class="input-value" id="modalDoctorName"></div>
                            <input type="hidden" id="doctorId" name="doctorId">
                        </div>
                        <div class="form-group">
                            <label>科室</label>
                            <div class="input-value" id="modalDepartment"></div>
                        </div>
                        <div class="form-group">
                            <label>预约日期</label>
                            <div class="input-value" id="modalDate"></div>
                            <input type="hidden" id="appointmentDate" name="appointmentDate">
                        </div>
                        <div class="form-group">
                            <label>预约时间</label>
                            <div class="input-value" id="modalTime"></div>
                            <input type="hidden" id="appointmentTime" name="appointmentTime">
                        </div>
                        <div class="form-group">
                            <label for="symptoms">症状描述</label>
                            <textarea id="symptoms" name="symptoms" placeholder="请简要描述您的症状..." rows="3"></textarea>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="cancel-btn" id="cancelBtn">取消</button>
                            <button type="submit" class="submit-btn" id="submitBtn">确认预约</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 提示信息弹窗 -->
        <div class="toast" id="toast"></div>
    </div>
    <script src="./appointment.js"></script>
</body>
</html> 